<!DOCTYPE html>
<html lang="zh" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="book">
<meta name="generator" content="Paradox, paradox-material-theme=0.6.0, mkdocs-material=3.0.3">

<meta name="lang:clipboard.copy" content="Copy to clipboard">
<meta name="lang:clipboard.copied" content="Copied to clipboard">
<meta name="lang:search.language" content="">
<meta name="lang:search.pipeline.stopwords" content="true">
<meta name="lang:search.pipeline.trimmer" content="true">
<meta name="lang:search.result.none" content="No matching documents">
<meta name="lang:search.result.one" content="1 matching document">
<meta name="lang:search.result.other" content="# matching documents">
<meta name="lang:search.tokenizer" content="[\s\-]+">


<meta name="description" content="book">
<link rel="shortcut icon" href="../assets/images/favicon.png">
<title>实战：为Ant Design Pro提供后端接口 · Scala Web 开发——基于Akka HTTP</title>
<link rel="stylesheet" href="../assets/stylesheets/application.451f80e5.css">
<link rel="stylesheet" href="../assets/stylesheets/application-palette.22915126.css">
<meta name="theme-color" content="#009688" />
<link rel="stylesheet" href="../lib/material__tabs/dist/mdc.tabs.min.css">
<link rel="stylesheet" href="../lib/prettify/prettify.css">
<script src="../assets/javascripts/modernizr.1aa3b519.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700|Roboto+Mono">
<style>
body,input{font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif}
code,kbd,pre{font-family:"Roboto Mono","Courier New",Courier,monospace}
</style>
<link rel="stylesheet" href="../assets/fonts/font-awesome.css">
<link rel="stylesheet" href="../assets/fonts/material-icons.css">
<link rel="stylesheet" href="../assets/stylesheets/paradox-material-theme.css">
</head>
<body
data-md-color-primary="teal"
data-md-color-accent="indigo"
>
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" data-md-component="overlay" for="__drawer"></label>
<header class="md-header" data-md-component="header">
<nav class="md-header-nav md-grid">
<div class="md-flex">
<div class="md-flex__cell md-flex__cell--shrink">
<a href="../index.html" title="Scala Web 开发——基于Akka HTTP" class="md-header-nav__button md-logo">
<i class="md-icon">local_library</i>
</a>
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<label class="md-icon md-icon--menu md-header-nav__button" for="__drawer"></label>
</div>
<div class="md-flex__cell md-flex__cell--stretch">
<div class="md-flex__ellipsis md-header-nav__title" data-md-component="title">
<span class="md-header-nav__topic">
Scala Web 开发——基于Akka HTTP
</span>
<span class="md-header-nav__topic">
实战：为Ant Design Pro提供后端接口
</span>
</div>
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<label class="md-icon md-icon--search md-header-nav__button" for="__search"></label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query" data-md-state="active">
<label class="md-icon md-search__icon" for="__search"></label>
<button type="reset" class="md-icon md-search__icon" data-md-component="reset" tabindex="-1">&#xE5CD;</button>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" data-md-scrollfix>
<div class="md-search-result" data-md-component="result">
<div class="md-search-result__meta">
Type to start searching
</div>
<ol class="md-search-result__list"></ol>
</div>
</div>
</div>
</div>
</div>

</div>
<div class="md-flex__cell md-flex__cell--shrink">
<div class="md-header-nav__source">
<a href="https://github.com/yangbajing/scala-web-development"
title="Go to repository"
class="md-source"
data-md-source="github">
<div class="md-source__icon">
<i class="fa fa-github"></i>
</div>
<div class="md-source__repository">
yangbajing/scala-web-development
</div>
</a>

</div>
</div>
</div>
</nav>
</header>

<div class="md-container">
<main class="md-main">
<div class="md-main__inner md-grid" data-md-component="container">
<div class="md-sidebar md-sidebar--primary" data-md-component="navigation">
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary" data-md-level="0" style="visibility: hidden">
<label class="md-nav__title md-nav__title--site" for="drawer">
<a href="../index.html" title="Scala Web 开发——基于Akka HTTP" class="md-nav__button md-logo">
<span class="md-nav__button md-logo">
<i class="md-icon">local_library</i>
</a>
<a href="../index.html" title="Scala Web 开发——基于Akka HTTP">
Scala Web 开发——基于Akka HTTP
</a>
</label>
<div class="md-nav__source">
<a href="https://github.com/yangbajing/scala-web-development"
title="Go to repository"
class="md-source"
data-md-source="github">
<div class="md-source__icon">
<i class="fa fa-github"></i>
</div>
<div class="md-source__repository">
yangbajing/scala-web-development
</div>
</a>

</div>
<ul>
  <li><a href="../preface.html" class="page">前言</a></li>
  <li><a href="../env/index.html" class="page">Scala 环境配置</a>
  <ul>
    <li><a href="../env/env.1.html" class="page">Sbt</a></li>
    <li><a href="../env/env.2.html" class="page">IDE开发工具</a></li>
    <li><a href="../env/env.z.html" class="page">小结</a></li>
  </ul></li>
  <li><a href="../scala/index.html" class="page">Scala 语言基础</a>
  <ul>
    <li><a href="../scala/scala.0.html" class="page">REPL</a></li>
    <li><a href="../scala/scala.1.html" class="page">你好，Scala</a></li>
    <li><a href="../scala/scala.2.html" class="page">Scala基础</a></li>
    <li><a href="../scala/scala.3.html" class="page">流程和函数</a></li>
    <li><a href="../scala/scala.4.html" class="page">集合</a></li>
    <li><a href="../scala/scala.5.html" class="page">class和object</a></li>
    <li><a href="../scala/scala.6.html" class="page">函数式</a></li>
    <li><a href="../scala/scala.7.html" class="page">Trait</a></li>
    <li><a href="../scala/scala.8.html" class="page">并发</a></li>
    <li><a href="../scala/scala.z.html" class="page">小结</a></li>
  </ul></li>
  <li><a href="../basic/index.html" class="page">Akka HTTP 基础</a>
  <ul>
    <li><a href="../basic/basic.0.html" class="page">Akka HTTP 基础</a></li>
    <li><a href="../basic/basic.1.html" class="page">Web 工作方式</a></li>
    <li><a href="../basic/basic.2.html" class="page">使用 Akka Http 搭建一个简单的 Web 服务</a></li>
    <li><a href="../basic/basic.3.html" class="page">Akka HTTP 的通用抽象</a></li>
    <li><a href="../basic/basic.z.html" class="page">小结</a></li>
  </ul></li>
  <li><a href="../server-api/index.html" class="page">服务端API</a>
  <ul>
    <li><a href="../server-api/work.html" class="page">Akka HTTP 如何使得 Web 工作</a></li>
    <li><a href="../server-api/advanced.html" class="page">高级服务端 API</a></li>
  </ul></li>
  <li><a href="../routing-dsl/index.html" class="page">路由DSL</a>
  <ul>
    <li><a href="../routing-dsl/route.html" class="page">Route 路由</a></li>
    <li><a href="../routing-dsl/directive.html" class="page">Directive 指令</a></li>
    <li><a href="../routing-dsl/custom-directive.html" class="page">自定义指令</a></li>
    <li><a href="../routing-dsl/rejections.html" class="page">拒绝 rejections</a></li>
    <li><a href="../routing-dsl/exception.html" class="page">异常处理</a></li>
    <li><a href="../routing-dsl/file-upload.html" class="page">实战：大文件断点上传、下载和秒传</a></li>
  </ul></li>
  <li><a href="../directives/index.html" class="page">常用指令</a>
  <ul>
    <li><a href="../directives/path.html" class="page">PathDirectives（路径指令）</a></li>
    <li><a href="../directives/method.html" class="page">directives/method.html</a></li>
    <li><a href="../directives/parameter_form.html" class="page">directives/parameter_form.html</a></li>
    <li><a href="../directives/marshalling.html" class="page">directives/marshalling.html</a></li>
    <li><a href="../directives/file.html" class="page">directives/file.html</a></li>
    <li><a href="../directives/cookie.html" class="page">directives/cookie.html</a></li>
  </ul></li>
  <li><a href="../data/index.html" class="page">数据</a>
  <ul>
    <li><a href="../data/data.0.html" class="page">数据</a></li>
    <li><a href="../data/data.1.html" class="page">JSON</a></li>
    <li><a href="../data/data.ant-design-pro.html" class="active page">实战：为Ant Design Pro提供后端接口</a></li>
    <li><a href="../data/data.kryo.html" class="page">Kryo</a></li>
    <li><a href="../data/data.2.html" class="page">Protobuf</a></li>
    <li><a href="../data/data.z.html" class="page">小结</a></li>
  </ul></li>
  <li><a href="../test/index.html" class="page">测试</a>
  <ul>
    <li><a href="../test/test.0.html" class="page">测试</a></li>
    <li><a href="../test/test.1.html" class="page">Scalatest</a></li>
    <li><a href="../test/test.2.html" class="page">测试异步代码</a></li>
    <li><a href="../test/test.3.html" class="page">端到端测试Route</a></li>
    <li><a href="../test/test.z.html" class="page">小结</a></li>
  </ul></li>
  <li><a href="../actor/index.html" class="page">Akka Actor</a>
  <ul>
    <li><a href="../actor/actor.html" class="page">Akka Typed Actor</a></li>
    <li><a href="../actor/actor-test.html" class="page">Akka Actor 测试</a></li>
    <li><a href="../actor/actor.z.html" class="page">Actor小结</a></li>
  </ul></li>
  <li><a href="../oauth/index.html" class="page">实战：实现OAuth 2服务</a>
  <ul>
    <li><a href="../oauth/oauth.0.html" class="page">实战：OAuth 2 服务</a></li>
    <li><a href="../oauth/oauth.1.html" class="page">OAuth 2简介</a></li>
    <li><a href="../oauth/oauth.2.html" class="page">OAuth 2接口设计</a></li>
    <li><a href="../oauth/oauth.3.html" class="page">OAuth 2服务实现</a></li>
    <li><a href="../oauth/oauth.z.html" class="page">小结</a></li>
  </ul></li>
  <li><a href="../database/index.html" class="page">访问数据库</a>
  <ul>
    <li><a href="../database/database.0.html" class="page">访问数据库</a></li>
    <li><a href="../database/database.1.html" class="page">使用 JDBC 访问 PostgreSQL</a></li>
    <li><a href="../database/database.2.html" class="page">使用 Slick 访问数据库</a></li>
    <li><a href="../database/database.3.html" class="page">访问 Cassandra 数据库</a></li>
    <li><a href="../database/database.4.html" class="page">访问 Redis</a></li>
    <li><a href="../database/database.5.html" class="page">访问 Elasticsearch</a></li>
    <li><a href="../database/database.z.html" class="page">小结</a></li>
  </ul></li>
  <li><a href="../engineering/index.html" class="page">工程化</a>
  <ul>
    <li><a href="../engineering/swagger.html" class="page">使用Swagger编写API文档</a></li>
    <li><a href="../engineering/guice.html" class="page">使用Guice管理类依赖</a></li>
  </ul></li>
  <li><a href="../grpc/index.html" class="page">Akka gRPC</a>
  <ul>
    <li><a href="../grpc/grpc.html" class="page">gRPC服务</a></li>
    <li><a href="../grpc/build-tool.html" class="page">构建工具</a></li>
    <li><a href="../grpc/deployment.html" class="page">部署</a></li>
    <li><a href="../grpc/grpc.z.html" class="page">小结</a></li>
  </ul></li>
  <li><a href="../config-discovery/index.html" class="page">实战：配置管理、服务发现系统</a></li>
  <li><a href="../appendix/index.html" class="page">附录</a>
  <ul>
    <li><a href="../appendix/appendix.0.html" class="page">参考资料</a></li>
    <li><a href="../appendix/appendix.1.html" class="page">专业术语</a></li>
    <li><a href="../appendix/appendix.2.html" class="page">词汇表</a></li>
  </ul></li>
  <li><a href="../donate.html" class="page">赞助</a></li>
</ul>
<nav class="md-nav md-nav--secondary">
<label class="md-nav__title" for="__toc">Table of contents</label>
<ul>
  <li><a href="../data/data.ant-design-pro.html#实战-为ant-design-pro提供后端接口" class="header">实战：为Ant Design Pro提供后端接口</a>
  <ul>
    <li><a href="../data/data.ant-design-pro.html#设置-ant-design-pro" class="header">设置 Ant Design Pro</a></li>
    <li><a href="../data/data.ant-design-pro.html#打包-部署" class="header">打包、部署</a></li>
    <li><a href="../data/data.ant-design-pro.html#总结" class="header">总结</a></li>
  </ul></li>
</ul>
</nav>

</nav>
<ul style="display: none">
<li class="md-nav__item md-version" id="project.version">
<label class="md-nav__link" for="__version">
<i class="md-icon" title="Version">label_outline</i> 1.0.0
</label>
</li>
</ul>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="toc">
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary">
<label class="md-nav__title" for="__toc">Table of contents</label>
<ul>
  <li><a href="../data/data.ant-design-pro.html#实战-为ant-design-pro提供后端接口" class="header">实战：为Ant Design Pro提供后端接口</a>
  <ul>
    <li><a href="../data/data.ant-design-pro.html#设置-ant-design-pro" class="header">设置 Ant Design Pro</a></li>
    <li><a href="../data/data.ant-design-pro.html#打包-部署" class="header">打包、部署</a></li>
    <li><a href="../data/data.ant-design-pro.html#总结" class="header">总结</a></li>
  </ul></li>
</ul>
</nav>

</div>
</div>
</div>
<div class="md-content">
<article class="md-content__inner md-typeset">
<div class="md-content__searchable">
<h1><a href="#实战-为ant-design-pro提供后端接口" name="实战-为ant-design-pro提供后端接口" class="anchor"><span class="anchor-link"></span></a>实战：为Ant Design Pro提供后端接口</h1>
<p>之前章节已经了解了Akka HTTP的路由定制、数据序列化等内容，是时候开始一个比较完整的Web应用示例了。这里我们将使用 Akka HTTP 来集成 <strong>Ant Design Pro</strong> ，Ant Design Pro是一个开箱即用的中台前端/设计解决方案，它由蚂蚁金服开发，官方地址：<a href="https://pro.ant.design/index-cn">https://pro.ant.design/index-cn</a>。</p>
<p>本文假定用户已经熟悉并会使用 Ant Design Pro，若还未接触过可以从官方文档开始：<a href="https://pro.ant.design/docs/getting-started-cn">https://pro.ant.design/docs/getting-started-cn</a>。</p>
<p><em>本文使用 Ant Design Pro 2.0版本</em></p>
<h2><a href="#设置-ant-design-pro" name="设置-ant-design-pro" class="anchor"><span class="anchor-link"></span></a>设置 Ant Design Pro</h2>
<p>Ant Design Pro 已经是一个完整的后台前端应用，我们只需要使用 Akka HTTP 为其提供后端API接口服务支持和静态资源文件的HTTP获取功能。</p>
<h3><a href="#创建api" name="创建api" class="anchor"><span class="anchor-link"></span></a>创建API</h3>
<p>Akka HTTP 的 Routing DSL 是从上到下一级一级的匹配路由的，当前一个路由不匹配时才判断下一个路由，这样一直到最后一个。利用这个特性，我们可以在整个路由定义的最后来设置返回React SPA需要的静态资源文件。</p>
<pre class="prettyprint"><a class="icon go-to-source" href="https://github.com/yangbajing/scala-web-development/tree/master/ant-design-pro/src/main/scala/scalaweb/ant/design/pro/route/Routes.scala#L9-L37" target="_blank" title="Go to snippet source"></a><code class="language-scala">def route: Route =
  pathPrefix(&quot;api&quot;) {
    pathGet(&quot;currentUser&quot;) {
      complete(Mocks.apiCurrentUser)
    } ~
    pathGet(&quot;fake_chart_data&quot;) {
      complete(Mocks.apiFakeChartData)
    } ~
    pathGet(&quot;tags&quot;) {
      complete(Mocks.apiTags)
    } ~
    pathGet(&quot;activities&quot;) {
      complete(Mocks.apiActivities)
    } ~
    pathGet(&quot;fake_list&quot;) {
      parameter(&#39;count.as[Int]) { count =&gt;
        complete(Mocks.apiFakeList(count))
      }
    } ~
    pathPrefix(&quot;project&quot;) {
      pathGet(&quot;notice&quot;) {
        complete(Mocks.project.notice)
      }
    }
  } ~
  notPathPrefixTest(&quot;api&quot;) {
    getFromResourceDirectory(&quot;dist&quot;) ~
    getFromResource(&quot;dist/index.html&quot;)
  }</code></pre>
<p>这里的重点在 <code>notPathPrefixTest(api) { .... }</code> 部分，这一块代码是用来返回 Ant Design Pro 静态资源的。首先它将判断请求URI不是以 <code>/api</code> 开头，若请求URI以<code>/api</code>开关则不进入里面的获取静态资源代码逻辑，而是直接返回一个预定义的指令：<code>reject</code>。通常，我们都会将API接口统一到 <code>/api</code> 这样的路径下，这样非 <code>/api</code> 开头的URI请求就可以交到下面的两句代码执行，来实现SPA应用在资源未找到时服务端默认返回 <code>/index.html</code> 的需求。</p>
<pre><code>getFromResourceDirectory(&quot;dist&quot;) ~
  getFromResource(&quot;dist/index.html&quot;)
</code></pre>
<ul>
  <li><code>getFromResourceDirectory</code>：根据URI请求路径从资源目录dist查找文件并返回</li>
  <li><code>getFromResource</code>：直接返回 dist/index.html 资源文件</li>
</ul>
<p>总体上，以上两个指令组合使用就可以实现类似 Nginx 的 <code>try_files $uri /index.html;</code> 效果</p>
<p><strong>Mocks.scala</strong>，定义了API接口数据并组装成 <code>HttpEntity</code> 对象。</p>
<pre class="prettyprint"><a class="icon go-to-source" href="https://github.com/yangbajing/scala-web-development/tree/master/ant-design-pro/src/main/scala/scalaweb/ant/design/pro/mock/Mocks.scala#L9-L18" target="_blank" title="Go to snippet source"></a><code class="language-scala">object project {
  def notice = toJsonEntity(Project.notice)
}
def apiCurrentUser = toJsonEntity(Api.currentUser)
def apiFakeChartData = toJsonEntity(Api.fake_chart_data)
def apiTags = toJsonEntity(Api.tags)
def apiActivities = toJsonEntity(Api.activities)

def toJsonEntity(str: String): HttpEntity.Strict =
  HttpEntity(ContentTypes.`application/json`, str)</code></pre>
<p>这里为了演示Akka HTTP与Ant Design Pro的集成，我并未直接去实现后端接口数据模型的生成逻辑，比如：model定义、数据存储操作等。而是通过直接返回字符串形式的JSON数据来模拟：</p>
<pre class="prettyprint"><a class="icon go-to-source" href="https://github.com/yangbajing/scala-web-development/tree/master/ant-design-pro/src/main/scala/scalaweb/ant/design/pro/mock/Api.scala#L68-L69" target="_blank" title="Go to snippet source"></a><code class="language-scala">val currentUser =
  &quot;&quot;&quot;{&quot;name&quot;:&quot;羊八井&quot;,&quot;avatar&quot;:&quot;https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png&quot;,&quot;userid&quot;:&quot;00000001&quot;,&quot;email&quot;:&quot;yangbajing@gmail.com&quot;,&quot;signature&quot;:&quot;海纳百川，有容乃大&quot;,&quot;title&quot;:&quot;一个好爸爸&quot;,&quot;group&quot;:&quot;华龙海数－某某某事业群－某某平台部－某某技术部－Developer&quot;,&quot;tags&quot;:[{&quot;key&quot;:&quot;0&quot;,&quot;label&quot;:&quot;很有想法的&quot;},{&quot;key&quot;:&quot;1&quot;,&quot;label&quot;:&quot;专注后端&quot;},{&quot;key&quot;:&quot;2&quot;,&quot;label&quot;:&quot;强~&quot;},{&quot;key&quot;:&quot;3&quot;,&quot;label&quot;:&quot;彪悍&quot;},{&quot;key&quot;:&quot;4&quot;,&quot;label&quot;:&quot;重庆崽儿&quot;},{&quot;key&quot;:&quot;5&quot;,&quot;label&quot;:&quot;海纳百川&quot;}],&quot;notifyCount&quot;:12,&quot;country&quot;:&quot;China&quot;,&quot;geographic&quot;:{&quot;province&quot;:{&quot;label&quot;:&quot;重庆市&quot;,&quot;key&quot;:&quot;330000&quot;},&quot;city&quot;:{&quot;label&quot;:&quot;渝北区&quot;,&quot;key&quot;:&quot;402260&quot;}},&quot;address&quot;:&quot;渝北区金开大道西段106号10栋移动新媒体产业大厦11楼&quot;,&quot;phone&quot;:&quot;023-88888888&quot;}&quot;&quot;&quot;</code></pre>
<p>通过<code>def toJsonEntity(str: String): HttpEntity.Strict = HttpEntity(ContentTypes.</code>application/json<code>, str)</code>函数，将JSON字符串实例化为一个<code>HttpEntity</code>对象并设置<code>Content-Type</code>为<code>application/json</code>类型。</p><div class="callout note "><div class="callout-title">注意</div>
<p>这里只定义了Ant Design Pro的 <strong>dashboard</strong> 栏目下3个页面需要的接口，其它接口并未实现，因为对于这个示例它们并不是重点。</p></div>
<h3><a href="#添加webpack-proxy支持" name="添加webpack-proxy支持" class="anchor"><span class="anchor-link"></span></a>添加webpack proxy支持</h3>
<p>修改 <code>ant-design-pro/web/config/config.js</code> 文件，在末尾右大括号（<code>}</code>）上方添加 <code>proxy</code> 设置API代理访问路径路径。这样所有的前端Ajax请求（请求<code>/api</code>开始的路径）都会被路由到Akka HTTP提供的API服务上。</p>
<pre class="prettyprint"><code class="language-javascript">  proxy: {
    &#39;/api&#39;: {
      target: &#39;http://localhost:22222&#39;,
      changeOrigin: true,
    },
  },
</code></pre>
<p>使用 <code>start:no-mock</code> 启动Ant Design Pro</p>
<pre><code>npm run start:no-mock
</code></pre>
<p>打开浏览器，访问 <a href="http://localhost:8000">http://localhost:8000</a> 地址：</p>
<p><img src="../assets/imgs/ant-design-pro-500.png" /></p>
<p>这时还未启动Akka HTTP后端服务，看到在请求后端API <code>/api/currentUser</code>时报504网关超时错误。这代表我们设置的 webpack.proxy 已经生效，接下来让我们启动Akka HTTP后端服务。</p>
<h3><a href="#启动akka-http-server" name="启动akka-http-server" class="anchor"><span class="anchor-link"></span></a>启动Akka HTTP Server</h3>
<p><strong>Main.scala</strong></p>
<pre class="prettyprint"><a class="icon go-to-source" href="https://github.com/yangbajing/scala-web-development/tree/master/ant-design-pro/src/main/scala/scalaweb/ant/design/pro/Main.scala#L13-L32" target="_blank" title="Go to snippet source"></a><code class="language-scala">object Main extends App with StrictLogging {
  implicit val system = ActorSystem()
  implicit val materializer = Materializer(system)
  import system.dispatcher

  val bindingFuture =
    Http().bindAndHandle(
      handler = new Routes().route,
      interface = &quot;0.0.0.0&quot;,
      port = 22222)

  bindingFuture.onComplete {
    case Success(binding) =&gt;
      sys.addShutdownHook(system.terminate())
      logger.info(s&quot;启动Akka HTTP Server成功，绑定地址: $binding&quot;)
    case Failure(e) =&gt;
      logger.error(s&quot;启动Akka HTTP Server失败：${e.getMessage}&quot;, e)
      system.terminate()
  }
}</code></pre>
<p>可以看到，编程启动Akka HTTP服务非常简单。我们执行<code>Main.scala</code>即可启动Akka HTTP服务。看到类似输出就代表服务已经启动成功：</p>
<pre><code>10:59:13.659 [default-akka.actor.default-dispatcher-4] INFO scalaweb.ant.design.pro.Main$ - 启动Akka HTTP Server成功，绑定地址: ServerBinding(/0:0:0:0:0:0:0:0:22222)
</code></pre>
<h2><a href="#打包-部署" name="打包-部署" class="anchor"><span class="anchor-link"></span></a>打包、部署</h2>
<p>Ant Design Pro 的 Akka HTTP集成已经完成，我们也在开发模式下分别启动了Webpack Dev Server和Akka HTTP Server来看到我们集成的效果。要把集成的成果部署到服务器上怎么办？非常的简单，执行如下的几行命令就可以生成一个同时提供后端API接口和HTTP静态资源渲染的独立可执行jar包。不需要使用Nginx/Apache的代理静态资源，这样部署更加简洁。当然，你也可以继续使用用Nginx/Apache来代理静态资源，如果需要的话。</p>
<pre><code>pushd ant-design-pro/web
yarn install
yarn run build
popd
rm -rf ant-design-pro/src/main/resources/dist/*
cp ant-design-pro/web/dist/* ant-design-pro/src/main/resources/dist/
sbt &quot;project ant-design-pro&quot; assembly
</code></pre>
<ol>
  <li>首先编译 Ant Design Pro，在 <code>dist</code> 目录生成静态资源。</li>
  <li>copy所有静态资源到 <code>resources/dist</code> 目录，这样Akka HTTP可以在生成的jar里通过Java资源文件机制访问到它们。</li>
  <li>使用 <code>sbt assembly</code> 命令打包。</li>
  <li>使用 <code>java -jar</code> 命令执行可执行jar包文件。</li>
</ol>
<p><strong>运行程序</strong></p>
<pre><code>java -jar ant-design-pro/target/scala-2.12/ant-design-pro-assembly-1.0.0.jar
</code></pre>
<p>打开浏览器访问 <a href="http://localhost:22222/">http://localhost:22222/</a> 即可看到 Ant Design Pro 的界面。</p>
<p><em>示例效果</em> <img src="../assets/imgs/account-center-01.png" /></p>
<h2><a href="#总结" name="总结" class="anchor"><span class="anchor-link"></span></a>总结</h2>
<p>我们通过一个简单的实战示例：ant-desigin-pro，将之前几章所讲知识串起来通过Akka HTTP技术实现了一个较为完整的Web应用。</p>
<p><em>本章源码在：<a href="https://github.com/yangbajing/scala-web-development/tree/master/ant-design-pro">https://github.com/yangbajing/scala-web-development/tree/master/ant-design-pro</a></em></p>
</div>
<div>
<a href="https://github.com/yangbajing/scala-web-development/tree/master/book/src/main/paradox/data/data.ant-design-pro.md" title="Edit this page" class="md-source-file md-edit">
Edit this page
</a>
</div>
<div class="print-only">
<span class="md-source-file md-version">
1.0.0
</span>
</div>
</article>
</div>
</div>
</main>
<footer class="md-footer">
<div class="md-footer-nav">
<nav class="md-footer-nav__inner md-grid">
<a href="../data/data.1.html" title="JSON" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
<div class="md-flex__cell md-flex__cell--shrink">
<i class="md-icon md-icon--arrow-back md-footer-nav__button"></i>
</div>
<div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
<span class="md-flex__ellipsis">
<span class="md-footer-nav__direction">
Previous
</span>
JSON
</span>
</div>
</a>
<a href="../data/data.kryo.html" title="Kryo" class="md-flex md-footer-nav__link md-footer-nav__link--next" rel="next">
<div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
<span class="md-flex__ellipsis">
<span class="md-footer-nav__direction">
Next
</span>
Kryo
</span>
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<i class="md-icon md-icon--arrow-forward md-footer-nav__button"></i>
</div>
</a>
</nav>
</div>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-footer-copyright">
Powered by
<a href="https://github.com/lightbend/paradox">Paradox</a>
and
<a href="https://jonas.github.io/paradox-material-theme/">Paradox Material Theme</a>

</div>
<div class="md-footer-social">
<a href="https://github.com/yangbajing" class="md-footer-social__link fa fa-github"></a><a href="https://weibo.com/yangbajing" class="md-footer-social__link fa fa-globe"></a><a href="https://www.yangbajing.me/" class="md-footer-social__link fa fa-globe"></a>
</div>

</div>
</div>
</footer>

</div>
<script src="../assets/javascripts/application.583bbe55.js"></script>
<script src="../assets/javascripts/paradox-material-theme.js"></script>
<script>app.initialize({version:"0.17",url:{base:"../."}})</script>
<script type="text/javascript" src="../lib/prettify/prettify.js"></script>
<script type="text/javascript" src="../lib/prettify/lang-scala.js"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
window.prettyPrint && prettyPrint();
});
</script>
</body>
</html>
